<script setup>
import { reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import {addCourse, getSelectedList, getUnselectedList,deleteCourse} from "@/apis/selectApi";
import { useRoute } from "vue-router";
import {useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
const account = route.query.account;

// 定义课程数据
const courseData = reactive({
  selectedCourses: [],
  unselectedCourses: []
});

// 分页数据
const pageData = reactive({
  pageSize: 5, // 每页显示 5 条数据
  selectedCurrentPage: 1,
  unselectedCurrentPage: 1
});

// 计算已选课程和未选课程的总学分
const selectedCredits = computed(() => {
  return courseData.selectedCourses.reduce((total, course) => total + course.credits, 0);
});

const unselectedCredits = computed(() => {
  return courseData.unselectedCourses.reduce((total, course) => total + course.credits, 0);
});

// 分页后的已选课程
const paginatedSelectedCourses = computed(() => {
  const startIndex = (pageData.selectedCurrentPage - 1) * pageData.pageSize;
  const endIndex = startIndex + pageData.pageSize;
  return courseData.selectedCourses.slice(startIndex, endIndex);
});

// 分页后的未选课程
const paginatedUnselectedCourses = computed(() => {
  const startIndex = (pageData.unselectedCurrentPage - 1) * pageData.pageSize;
  const endIndex = startIndex + pageData.pageSize;
  return courseData.unselectedCourses.slice(startIndex, endIndex);
});

onMounted(async () => {
  courseData.selectedCourses = await getSelectedList(account);
  courseData.unselectedCourses = await getUnselectedList(account);
});

// 选修课程
const selectCourse = async (course) => {
  courseData.unselectedCourses = courseData.unselectedCourses.filter(c => c.id !== course.id);
  courseData.selectedCourses.push(course);
  let data= await addCourse(account,course)
  console.log(data)
  ElMessage.success(`成功选修课程: ${course.name}`);
};

// 退选课程
const dropCourse = async (course) => {
  courseData.selectedCourses = courseData.selectedCourses.filter(c => c.id !== course.id);
  courseData.unselectedCourses.push(course);
  let data= await deleteCourse(account,course);
  console.log(data)
  ElMessage.warning(`成功退选课程: ${course.name}`);
};

// 处理已选课程分页变化
const handleSelectedPageChange = (page) => {
  pageData.selectedCurrentPage = page;
};

// 处理未选课程分页变化
const handleUnselectedPageChange = (page) => {
  pageData.unselectedCurrentPage = page;
};
function goBack(){
  router.go(-1)
}
</script>

<template>
  <el-page-header v-on:back="goBack">
    <template #content>
      <div>
        <span>欢迎您</span>
        <el-avatar
            :size="32"
            class="mr-3"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class="text-large font-600 mr-3">{{account}}</span>
      </div>
    </template>
  </el-page-header>
  <div class="course-selection-container">
    <h2>选课系统</h2>
    <!-- 已选课程列表 -->
    <div class="course-list">
      <h3>已选课程 (总学分: {{ selectedCredits }})</h3>
      <el-table :data="paginatedSelectedCourses" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="200"></el-table-column>
        <el-table-column prop="name" label="课程名称" width="200"></el-table-column>
        <el-table-column prop="description" label="描述" width="200"></el-table-column>
        <el-table-column prop="credits" label="学分" width="100"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" size="small" @click="dropCourse(scope.row)">退选</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
          :current-page="pageData.selectedCurrentPage"
          :page-size="pageData.pageSize"
          :total="courseData.selectedCourses.length"
          layout="prev, pager, next"
          @current-change="handleSelectedPageChange"
      />
    </div>

    <!-- 未选课程列表 -->
    <div class="course-list">
      <h3>未选课程 (总学分: {{ unselectedCredits }})</h3>
      <el-table :data="paginatedUnselectedCourses" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="200"></el-table-column>
        <el-table-column prop="name" label="课程名称" width="200"></el-table-column>
        <el-table-column prop="description" label="描述" width="200"></el-table-column>
        <el-table-column prop="credits" label="学分" width="100"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" @click="selectCourse(scope.row)">选修</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
          :current-page="pageData.unselectedCurrentPage"
          :page-size="pageData.pageSize"
          :total="courseData.unselectedCourses.length"
          layout="prev, pager, next"
          @current-change="handleUnselectedPageChange"
      />
    </div>
  </div>
</template>

<style scoped>
.course-selection-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.course-list {
  margin-bottom: 30px;
}

h2, h3 {
  text-align: center;
}
</style>